<template>
  <div class="template-type-manage">
    <!-- 搜索与新增区域 -->
    <el-card class="mb-4">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="搜索模板类型">
          <el-input
              v-model="queryForm.templateTypeName"
              placeholder="请输入模板类型名称"
              clearable
              style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleAdd">新增模板类型</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card>
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
            prop="templateTypeName"
            label="模板类型"
            align="center"
        />
        <el-table-column
            prop="createdTime"
            label="创建时间"
            align="center"
        />
        <el-table-column
            prop="updatedTime"
            label="修改时间"
            align="center"
        />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)"
            >修改</el-button
            >
            <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.templateTypeId)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增弹窗 -->
    <el-dialog title="新增模板类型" v-model="addDialogVisible" width="400px">
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="模板类型名称">
          <el-input v-model="addForm.templateTypeName" placeholder="请输入模板名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </template>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改模板类型" v-model="editDialogVisible" width="400px">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="模板类型名称">
          <el-input v-model="editForm.templateTypeName" placeholder="请输入新模板名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/utils/request"; // 你自己的 axios 封装

const queryForm = ref({
  templateTypeName: "",
});
const tableData = ref([]);
const loading = ref(false);

// 弹窗控制
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);

// 表单数据
const addForm = ref({
  templateTypeName: "",
});
const editForm = ref({
  templateTypeId: null,
  templateTypeName: "",
});

// 获取模板类型列表
const getTemplateTypes = async () => {
  loading.value = true;
  try {
    const { data } = await request.get("/system/templateType/getDictTemplateType", {
      params: { templateTypeName: queryForm.value.templateTypeName || "" },
    });
    tableData.value = data || [];
  } catch (err) {
    ElMessage.error("获取模板类型失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  getTemplateTypes();
};

// 重置
const handleReset = () => {
  queryForm.value.templateTypeName = "";
  getTemplateTypes();
};

// 打开新增弹窗
const handleAdd = () => {
  addForm.value.templateTypeName = "";
  addDialogVisible.value = true;
};

// 提交新增
const submitAdd = async () => {
  if (!addForm.value.templateTypeName.trim()) {
    ElMessage.warning("请输入模板名称");
    return;
  }
  try {
    const res = await request.post(
        "/system/templateType/addTemplateType",
        null,
        { params: { templateTypeName: addForm.value.templateTypeName } }
    );
    ElMessage.success(res.data || "添加成功");
    addDialogVisible.value = false;
    await getTemplateTypes();
  } catch (err) {
    ElMessage.error("添加失败");
  }
};

// 打开修改弹窗
const handleEdit = (row) => {
  editForm.value.templateTypeId = row.templateTypeId;
  editForm.value.templateTypeName = row.templateTypeName;
  editDialogVisible.value = true;
};

// 提交修改
const submitEdit = async () => {
  if (!editForm.value.templateTypeName.trim()) {
    ElMessage.warning("请输入新的模板名称");
    return;
  }
  try {
    await request.post("/system/templateType/updateTemplateType", {
      typeId: editForm.value.templateTypeId,
      typeName: editForm.value.templateTypeName,
    });
    ElMessage.success("修改成功");
    editDialogVisible.value = false;
    await getTemplateTypes();
  } catch (err) {
    ElMessage.error("修改失败");
  }
};

// 删除模板类型
const handleDelete = (id) => {
  ElMessageBox.confirm("确定要删除该模板类型吗？", "提示", {
    type: "warning",
  })
      .then(async () => {
        await request.post("/system/templateType/deleteTemplateType", null, {
          params: { id },
        });
        ElMessage.success("删除成功");
        await getTemplateTypes();
      })
      .catch(() => {});
};

// 初始化
onMounted(() => {
  getTemplateTypes();
});
</script>

<style scoped>
.template-type-manage {
  padding: 20px;
  font-family: "Microsoft YaHei",serif;
  background-color: #f9f7f3;
}

.mb-4 {
  margin-bottom: 20px;
}
</style>